<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta content="telephone=no" name="format-detection" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover" />

		<meta charset="utf-8">
		<script type="text/javascript" src="js/boot.js"></script>
		<title>我的账户</title>
	</head>

	<body>
		<div id="page" style="background-color: #fff;">
			<div class="header">
				<div class="header-top">
					<div>
						<img class="head-img" :src="info.imgUrl" />
						<div class="head-name">
							{{info.name}}
						</div>
					</div>
					<div class="head-number">
						工号：{{info.number}}
					</div>
				</div>
				<div class="head-bottom">
					<div class="balance">
						<img src="image/7_zhye.png" /> 账户余额
					</div>
					<div class="balance-num">
						<span>{{info.balance.toFixed(2)}}</span>元
					</div>
				</div>
			</div>
			<div style="height: 0.1rem;background-color: #efeff4;"></div>
			<a class="accountUrl van-hairline--bottom" href="javascript:http.gotoHtml('/weixin/capitalFlow.html');">
				<div>
					<img class="capitalIcon" src="image/7_zjbdjl.png"> 资金变动记录
				</div>
				<img class="arrow" src="image/7_zjbdjl_jt.png">
			</a>
			<van-list v-if="record.length>0" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="capitalList van-hairline--bottom" v-for="item in record">
					<div class="capitalbox">
						<img class="amountIcon" :src="item.title == '消费' ? 'image/7_1xf.png' : item.title == '补贴' ? 'image/7-2but.png' : 'image/7_3chonz.png'">
						<div class="amountInfo">
							<div>
								<div class="amountTitle">
									{{item.title}}
								</div>
								<div class="amountTime">
									{{item.time}}
								</div>
							</div>
							<span class="amountNum" :style="{color: item.title == '消费' ? '#333' : '#37c150'}">{{item.title == '消费' ? '-' : '+'}}{{item.amount.toFixed(2)}}元</span>
						</div>
					</div>
				</div>
			</van-list>
			<div v-else class="noRecord">
				<img src="image/7_2.png"> 暂无资金变动记录
			</div>
		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el: '#page',
			data: {
				info: {
					imgUrl: 'image/7_mrtx.png',
					name: '张三丰',
					number: '544456',
					amount: 100,
					balance: 342.5
				},
				loading: false,
				finished: false,
				record: [{
					title: '消费',
					time: new Date(),
					amount: 35.9
				}, {
					title: '补贴',
					time: new Date(),
					amount: 20
				}, {
					title: '充值',
					time: new Date(),
					amount: 20
				}]
			},
			methods: {
				onLoad() {
					// 异步更新数据
					setTimeout(() => {
						this.record.push({
							title: '消费',
							time: new Date(),
							amount: 35.9
						})
						// 加载状态结束
						this.loading = false;

						// 数据全部加载完成
						if(this.record.length >= 10) {
							this.finished = true;
						}
					}, 500);
				}
			},
			created() {

			}
		})
	</script>

</html>